<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3266421_50h0322wnow.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3423448_tl1swu58bmo.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3423448_p9rve5la3xp.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/retset.css">

</head>

<body>
    <div id="top">
        <div class="top-1">
            <ul class="top-title">
                <li><a href="../html/xiaomi index.html">小米商城</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">LOT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">天星数科</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开放平台</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">资质证照</a></li>
                <li><a href="">协议规则</a></li>
                <li><a href="">下载App</a>
                    <div class="xiaomiApp"><img src="" alt="">
                    </div>
                </li>
                <li><a href="">Select Location</a></li>
            </ul>
            <dl>
                <dt>
                <dd class="noLogin" style="display: none;">
                    <a href="../html/log.html">登录</a>
                    <a href="../html/reg.html">注册</a>
                </dd>
                <dd class="login" style="display: none;">xx</dd>
                <dd class="loginOut">退出账号</dd>

                <dd>
                    <a href="">消息通知</a>
                </dd>
                <dd class="cart">
                    <i class="iconfont icon-gouwuchekong"></i>

                    <a href="../html/cart.html">购物车(0)</a>
                    <div class="hide1">购物车中还没有商品赶快选购吧!</div>
                </dd>

                </dt>
            </dl>

        </div>

    </div>
    <div id="site-header">
        <div class="container">
            <em><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></em>
            <ul>
                <li>
                    <a href="">Xiaomi手机</a>
                    <div class="hide">
                        <div class="box">
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="">Redmi红米</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">平板</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <div class="know">
                <button><a class="input-1 iconfont icon-sousuo"></a></button>
                <input class="input-2" type="search" placeholder="小米笔记本">
                <ul class="result-list">
                    <li><a href="#" style="text-align: start;">全部商品</a></li>
                    <li><a href="#" style="text-align: start;">小米11</a></li>
                    <li><a href="#" style="text-align: start;">小米10S</a></li>
                    <li><a href="#" style="text-align: start;">小米笔记本</a></li>
                    <li><a href="#" style="text-align: start;">小米手机</a></li>
                    <li><a href="#" style="text-align: start;">黑鲨4</a></li>
                    <li><a href="#" style="text-align: start;">空调</a></li>
                </ul>

            </div>
        </div>

    </div>
    <div id="nav" style="width:100%; background-color: #f5f5f5;height: 40px;">
        <div class="nav_1" style="background-color: #f5f5f5;
        width: 1226px; margin:auto; font-size:12px;
        line-height: 40px;color: #757575;">
            <p>
                <a href="">首页</a>
                >
                <a href="">全部结果</a>
                >
                <a href="">小米手机</a>
            </p>
        </div>
    </div>
    <div id="nav_2" style="width: 100%;background-color: white;height: 96px;">
        <ul class="nav_2_1" style="width:1226px;margin: auto;display: flex;padding: 36px 0;height: 20px;">
            <li style="color: #b0b0b0;">分类:</li>
            <li><a href="">全部</a></li>
            <li><a href="">红米手机</a></li>
            <li><a href="">小米手机</a></li>
            <li><a href="">黑鲨手机</a></li>
        </ul>
    </div>
    <div id="main">
        <div class=" head-2">
            <p><a style="color: #ff6700;">综合</a>&emsp;|&emsp;<a>新品</a>&emsp;|&emsp;<a>销量</a>&emsp;|&emsp;价格
                <button class="asc"><i class="iconfont icon-shang--jiantou" style="font-size: 25px;"></i></button>
                <button class="desc"><i class="iconfont icon-xia--jiantou" style="font-size: 25px;"></i></button>
            </p>
        </div>
        <ul class="list-xiaomi">

            <!-- <li>
                <a href="">
                    <img src="" alt="">
                    <h3></h3>
                    <p></p>
                    <strong></strong>
                </a>
            </li> -->
        </ul>
    </div>

    <div id="paged">
        <div class="paged_x">
            <h3><span>猜你喜欢</span></h3>
            <ul class="paged_y">
                <!-- <li>
                    <a href="">
                        <img src="" alt="">
                        <h3></h3>
                        <p></p>
                    </a>
                </li> -->
            </ul>
            <div class="page">
                <span class="prev disabled">&lt;</span>
                <span class="next">&gt;</span>
            </div>
        </div>
    </div>









    <div id="footer">
        <div class="footer-service">
            <ul class="list-service clearfix">
                <li class="first"><a href="" class="iconfont icon-weixiubaoyang">预约维修项目</a></li>
                <li><a href="" class="iconfont icon-7tianbaotuihuan"></a>7天无理由退货</a></li>
                <li><a href="" class="iconfont icon-tianbaotui">15天免费换货</a></li>
                <li><a href="" class="iconfont icon-baoyou">满69元包邮</a></li>
                <li><a href="" class="iconfont icon-dizhi">520余家售后网点</a></li>
            </ul>
        </div>
        <div class="footer-links">
            <dl class="col-links">
                <dt>帮助中心</dt>
                <dd style="color: #757575;margin: 10px 0 0;font-size: 12px;"><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl class="col-links">
                <dt>服务支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">自助服务</a></dd>
                <dd><a href="">相关下载</a></dd>
            </dl>
            <dl class="col-links">
                <dt>线下门店</dt>
                <dd><a href="">小米之家</a></dd>
                <dd><a href="">服务网点</a></dd>
                <dd><a href="">授权体验店/专区</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关于小米</dt>
                <dd><a href="">了解小米</a></dd>
                <dd><a href="">加入小米</a></dd>
                <dd><a href="">投资者关系</a></dd>
                <dd><a href="">企业社会责任</a></dd>
                <dd><a href="">廉洁举报</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关注我们</dt>
                <dd><a href="">新浪微博</a></dd>
                <dd><a href="">官方微信</a></dd>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">公益基金会</a></dd>
            </dl>
            <dl class="col-links">
                <dt>特色服务</dt>
                <dd><a href="">F码通道</a></dd>
                <dd><a href="">礼物码</a></dd>
                <dd><a href="">防伪查询</a></dd>
            </dl>
            <div class="col-contact">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <a rel="nofollow" class="btn btn-line-primary btn-small J_contactBtn"> <i class="iconfont icon-duanxin"
                        style="color: #ff6700;"></i> 人工客服 </a>
                <div class="follow">
                    关注小米
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank" class="wb"></a>
                </div>
            </div>
        </div>
    </div>
    <div id="site-info">
        <div class="container">
            <div class="logo ir"></div>
            <div class="info-text">
                <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a> <span
                        class="sep">|</span> <a rel="nofollow"
                        href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358" target="_blank">政企服务</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/"
                        target="_blank">小米集团隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//m.mi.com/support/module?id=63&amp;headless=1"
                        target="_blank">小米商城隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//www.mi.com/aptitude/list?id=62" target="_blank">小米商城用户协议</a> <span class="sep">|</span>
                    <a rel="nofollow" href="//static.mi.com/feedback/" target="_blank">问题反馈</a> <span
                        class="sep">|</span> <a rel="nofollow" href="javascript:void(0);"
                        class="J_siteGlobalRegion">Select Location</a>
                </p>
                <p class="sites"><a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.cca.org.cn/"
                        target="_blank">中国消费者协会</a> <span class="sep">|</span> <a rel="nofollow"
                        href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
                </p>
                <p>
                    ©
                    <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a> <a
                        rel="nofollow"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                        target="_blank">京公网安备11010802020134号</a> <a href="//www.mi.com/culture-license/"
                        target="_blank">京网文[2020]0276-042号</a> <br> <a href="//www.mi.com/medical/record/"
                        target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="//www.mi.com/medical/qualification/"
                        target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/"
                        target="_blank">营业执照</a> <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a> <br>
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                        target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png"
                        target="_blank">食品经营许可证</a> <br>
                    违法和不良信息举报电话：171-5104-4404&nbsp;<a href="https://www.mi.com/intellectual"
                        target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
            </div>
            <div class="info-links"><a rel="nofollow"
                    href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
                    target="_blank"><img rel="nofollow" src="//i1.mifile.cn/f/i/17/site/truste.png"
                        alt="TRUSTe Privacy Certification"></a> <a rel="nofollow"
                    href="//search.szfw.org/cert/l/CX20120926001783002010" target="_blank"><img rel="nofollow"
                        src="//s01.mifile.cn/i/v-logo-2.png" alt="诚信网站"></a> <a
                    id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow"
                    href="//xyt.xinchacha.com/pcinfo?sn=523009637759455232&amp;certType=6" target="_blank"><img
                        rel="nofollow" src="//xyt.xinchacha.com/img/icon/icon3.png" alt="可信网站"></a> <a rel="nofollow"
                    href="//www.mi.com/service/buy/commitment/" target="_blank"><img rel="nofollow"
                        src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                        alt="诚信经营 放心消费"></a><a rel="nofollow"
                    href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb"
                    class="safe-auth J_safeAuth                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              "><img
                        rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
                        class="img1"><img rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1cf9235c7dd1b1f8bf40721bfa8cb793.png"
                        class="img2"></a></div>
            <div class="slogan ir">探索黑科技，小米为发烧而生</div>
            <div class="slogan-bottom">让全球每个人都可以享受科技带来的美好生活</div>
        </div>
    </div>


    <script src="../js/tools.js"></script>
    <script>

        // // 固定头部
        // // let nav = document.querySelector('#nav-2')
        // // let site = document.querySelector('#site-header')
        // // 页面滚动事件
        // let sk = document.getElementById('.#nav')
        // let header = document.getElementById('#top')
        // // 1. 页面滚动事件
        // window.addEventListener('scroll', function () {
        //     // console.log(11)
        //     // 要检测滚动的距离
        //     // console.log(document.documentElement.scrollTop)
        //     // console.log(sk.offsetTop)
        //     // 2. 要检测滚动的距离 >= 秒杀模块的offsetTop 则滑入
        //     if (document.documentElement.scrollTop >= sk.offsetTop) {
        //         // alert('改吃饭了')
        //         header.style.top = '0'
        //     } else {
        //         header.style.top = '-80px'
        //     }
        // })




        // 小米搜索框
        // 1. 获取元素   input 
        let search = document.querySelector('input')
        let list = document.querySelector('.result-list')
        let sousuo = document.querySelector('p')
        console.log(sousuo);

        // 2. 事件监听 获得光标事件  focus
        search.addEventListener('focus', function () {
            // 显示下拉菜单
            list.style.display = 'block'
            // 文本框变色
            this.classList.add('search')


        })
        // 3. 事件监听 失去光标事件  blur
        search.addEventListener('blur', function () {
            // 隐藏下拉菜单
            list.style.display = 'none'
            // 文本框去色
            this.classList.remove('search')
        })



        // 判断用户是否登录
        const user = localStorage.getItem('login_user');
        if (user) {
            getEle('.login').style.display = 'block';
            getEle('.login').innerHTML = user;
        } else {
            getEle('.noLogin').style.display = 'block';
        }

        // 退出账号
        // 分析：不仅仅是跳转到登录，而是需要把登录信息给删除
        const loginOut = document.querySelector('.loginOut')
        console.log(loginOut);
        loginOut.addEventListener('click', function () {
            // 先删除登录信息
            removeCookie('login_user');
            // 再跳转到登录
            location.href = './log.html';
        })


        // 关键字可以为空
        let kw = '';
        // 排序的字段
        let sortName = 'goods_id';
        // 排序的方法  asc / desc
        let sortType = 'asc';

        getData()



        // 搜索
        $('.know button').onclick = function () {
            kw = $('.know input').value;
            getData()
        }

        // 升序
        $('.asc').onclick = function () {
            sortName = 'goods_price';
            sortType = 'asc';
            getData()
        }
        // 降序
        $('.desc').onclick = function () {
            sortName = 'goods_price';
            sortType = 'desc';
            getData()
        }



        // 分页
        let size = 5;
        let page = 1;
        let pageAll;
        getDatapage()

        const oNext = document.querySelector('.next');
        const oPrev = document.querySelector('.prev');

        oNext.onclick = function () {
            if (this.classList.contains('disabled')) {
                return;
            }

            page++;
            getDatapage();

            if (oPrev.classList.contains('disabled')) {
                oPrev.classList.remove('disabled');
            }

            if (page == pageAll) {
                this.classList.add('disabled');
            }

        }


        oPrev.onclick = function () {
            if (this.classList.contains('disabled')) {
                return;
            }

            page--;
            getDatapage();

            if (oNext.classList.contains('disabled')) {
                oNext.classList.remove('disabled');
            }

            if (page == 1) {
                this.classList.add('disabled');
            }

        }

        // 分页
        function getDatapage() {
            ajax({
                type: 'get',
                data: {
                    size,
                    page
                },
                path: '../php/page.php',
                success: res => {
                    console.log(res);
                    const { status, msg, list, pageLen } = res;
                    if (status) {
                        // 页数不能整除   向上取整
                        pageAll = Math.ceil(pageLen / size);
                        let html = '';
                        list.forEach(v => {
                            const {
                                goods_img,
                                goods_title,
                                goods_des,
                                goods_price
                            } = v;
                            html += `
                        <li>
                            <a href="">
                                <img src="${goods_img}" alt="">
                                <h4>${goods_title}</h4>
                                <p>${goods_price}元</p>
                            </a>
                        </li>
                        `
                            $('.paged_y').innerHTML = html;

                        })
                    }
                }
            })
        }




        //生成列表   
        function getData() {
            ajax({
                type: 'get',
                data: {
                    kw,
                    sortName,
                    sortType
                },
                path: '../php/list.php',
                success: res => {
                    console.log(res);
                    const { status, msg, data: list } = res;
                    if (status) {
                        let str = '';
                        list.forEach(v => {
                            str += `
                            <li data-id="${v.id}">
                                <a href="./detail.html?id=${v.id}">
                                    <img src="${v.img}" alt="">
                                    <h3>${v.title}</h3>
                                    <p>${v.des}</p>
                                    <strong>${v.price}元</strong>
                                    <p>分期购物</p>
                                    <i class="iconfont icon-huabeifenqi" style="font-size: 30px; color:blue"></i>
                                 
                                    <i class="iconfont icon-fenqi" style="color: red; font-size: 40px;"></i>
                                </a>
                            </li>
                            `
                        })

                        $('.list-xiaomi').innerHTML = str;
                        // $('.paged_y').innerHTML = str;


                    } else {
                        alert(msg)
                    }
                }
            })
        }





    </script>
</body>

</html>